<template>
  <view>
    <u-toast ref="uToast"></u-toast>
    <u-navbar :is-back="false" :title="title" title-color="white" :border-bottom="false" :background="background" title-size="34">
    </u-navbar>
    <view class="uni-container">
      <view class="bottom-wrapper">
        <scroll-view
          scroll-y="true"
          :refresher-threshold="45"
          @refresherrefresh="refresherrefreshFun"
          :refresher-triggered="isRefresher"
          refresher-enabled="true"
        >
          <uni-table ref="table" class="table" :loading.sync="loadingB" border emptyText="暂无更多数据">
            <!-- 表头行 -->
            <view class="table_head">
              <uni-tr class="head-table">
                <uni-th width="140rpx" align="center">
                  <view class="head-table t1"> 股票代码</view>
                </uni-th>
                <uni-th width="150rpx" align="center">
                  <view class="head-table t1"> 股票名称</view>
                </uni-th>
                <uni-th width="100rpx" align="center">
                  <view class="head-table t1"> 买卖方向</view>
                </uni-th>
                <uni-th width="200rpx" align="center">
                  <view class="head-table t1"> 加入日期</view>
                </uni-th>
                <uni-th width="140rpx" align="center">
                  <view class="head-table t1"> 监控操作</view>
                </uni-th>
              </uni-tr>
            </view>
            <!-- 表格数据行 -->
            <view class="table_body care">
              <uni-tr class="row-table" v-for="(item, index) in tableData" :ref="'table' + index" :key="index">
                <uni-td align="center">
                  <view @click="clickTodeatil(item)" class="row-table1"> {{ item.code }}</view>
                </uni-td>
                <uni-td align="center">
                  <view class="row-table2"> {{ item.name }}</view>
                </uni-td>
                <uni-td align="center">
                  <view class="row-table3"> {{ getLabel(item.type) }}</view>
                </uni-td>
                <uni-td align="center">
                  <view class="row-table4"> {{ item.createTime }}</view>
                </uni-td>
                <uni-td align="center">
                  <u-button plain="true" shape="circle" :ripple="true" class="hangdle-say" size="mini" @click="cancelCar(item)"
                    >取消监控</u-button
                  >
                </uni-td>
              </uni-tr>
            </view>
          </uni-table>

          <view class="below-s">系统自动推送监控股票买卖时机到微信通知一次后自动删除，继续监控股票需重新点击加入监控</view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import ChoiceSelected from '../../components/choice-selected.vue'
import { careList, careCancel } from 'api/focus.js'
export default {
  data() {
    return {
      isRefresher: false, // 下拉刷新
      title: '监控列表',
      tableData: [],
      loadingB: false,
      background: {
        // 导航栏背景图
        backgroundImage: 'linear-gradient(to  right, #3ad1ff, #0055ff)'
      }
    }
  },
  components: {
    ChoiceSelected
  },
  onShow() {
    this.getData()
  },
  created() {
    this.getData()
  },
  computed: {},

  methods: {
    getLabel(o) {
      const type = Number(o)
      switch (type) {
        case 0:
          return '买入'
        case 1:
          return '卖出'
        case 2:
          return '买/卖'
        default:
          return '未知'
      }
    },
    clickTodeatil(item) {
      this.$u.vuex('vuex_num', item.code)
      uni.switchTab({
        url: '/pages/week/index'
      })
    },
    async refresherrefreshFun() {
      console.log('触发下拉刷新了')
      this.isRefresher = true
      await this.getData(this.keyword)
      // 停止下拉刷新效果
      this.isRefresher = false
    },
    /**
     * @desc: 获取数据
     * @author: majun
     * @param {*} id
     */
    async getData() {
      this.loadingB = true
      try {
        const { data } = await careList()
        this.tableData = data.records || []
        console.log(this.tableData, 'this.tableData')
      } finally {
        this.loadingB = false
      }
    },
    /**
     * @description: 取消关注
     * @param {*} item
     * @author: majun
     */
    async cancelCar(item) {
      const params = {
        code: item.code,
        stockType: item.name === '上证指数' ? 'zs' : 'gg'
      }
      await careCancel(params)
      this.$refs.uToast.show({
        title: '取消成功！',
        type: 'success'
      })
      this.getData()
    }
  }
}
</script>

<style lang="scss">
/* 表格标题固定定位 */
.table_head {
  position: absolute;
  top: 0;
  left: 0;
}
.care {
  .uni-table-tr {
    display: flex !important;
    .uni-table-td:nth-child(3) {
      flex: 1 1 auto;
    }
  }
  // flex: 1 1 auto;
}
.uni-padding-wrap {
  padding-top: 10px;
}
.table_body {
  margin-top: 120rpx;
  overflow: auto;
}

.uni-table-td {
  font-size: 24rpx !important;
  color: #b4b4b4 !important;
  padding: 8px 8px !important;
  // line-height: 48rpx !important;
}

.t1 {
  margin: 0 auto;
  width: 50rpx;
}

.row-table1 {
  color: rgb(119, 158, 241);
  width: 100rpx;
}

.row-table2 {
  width: 100rpx;
}

.row-table3 {
  width: 60rpx;
}

.row-table4 {
  width: 180rpx;
}

// 表头文字大小
.head-table {
  font-size: 24rpx;
}

// 表头颜色
.uni-table-th {
  color: #616161 !important;
}

.table--border {
  border-right: 1px #fff solid !important;
}

.below-s {
  font-size: 24rpx;
  text-align: left;
  margin-top: 6px;
  color: rgb(168, 166, 166);
}

.uni-group {
  display: flex;
  align-items: center;
}

.bottom-wrapper {
  text-align: center;
  padding: 0 10rpx;
}

.u-close-wrap {
  .u-icon__icon {
    font-size: 22px !important;
  }
}

.t1 {
  margin: 0 auto;
  // width: 60rpx;
}

.empty-border {
  font-size: 16px !important;
  top: 50%;
}
</style>
